<template>
  <div class="page">
    <div class="page_filter">
      <el-radio-group v-model="form.monitorType" @change="queryList">
        <el-radio-button :label="item.monitorType" v-for="item in monitorTypeBtn" :key="item.monitorType">{{item.name}}
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="page_main">
      <div v-for="(item,index) in currentRow" :key="item.workPointId" class="page_mainBox">
        <h3 style="width: 100%">{{item.workPointName}}</h3>
        <el-card style="width: 33%;text-align: right" v-for="(child,index1) in item.monitorList" :key="child.monitorPointId">
          <div style="width: 100%;height: 100%" v-if="child.record.recordList.length!==0">
            <el-tag style="cursor: pointer;margin-left: 5px;margin-top: 5px;margin-bottom: 5px"
                    @click="toControl(item.workPointId,child.monitorPointId)"
                    size="mini">
              {{child.monitorPointName}}，点击查看详情
            </el-tag>
            <echarts-one-compose
              v-if="form.monitorType==1" ref="echartsChange1"
              type="AB"
              :xNum="xNum"
            ></echarts-one-compose>
            <echarts-two-change
              v-if="form.monitorType==2" ref="echartsChange2"

            ></echarts-two-change>
            <echarts-three-change v-if="form.monitorType==3" ref="echartsChange3"></echarts-three-change>
            <echarts-eight-change v-if="form.monitorType==8"   :ref="`echartsChange8${index}${index1}`"
            ></echarts-eight-change>
          </div>
          <div v-else>
            <el-tag style="cursor: pointer;margin-left: 5px;margin-top: 5px;margin-bottom: 5px"
                    @click="toControl(item.workPointId,child.monitorPointId)"
                    size="mini">
              {{child.monitorPointName}}，点击查看详情
            </el-tag>
            <p style="text-align: center;line-height: 15vw;font-weight: 600;font-size: 1.5vw">近七天暂无数据</p>
          </div>
        </el-card>
      </div>
    </div>
    <x-loading v-show="isLoading"></x-loading>

  </div>
</template>

<script>
  import {getLocalStorageItem} from '@/utils/storage-helper'
  import {
    getMonitorTypeRecord
  } from "@/services/model/project-info";
  import EchartsThreeChange from '../monitor-point/monitor-echarts/base/echarts-3-change'
  import ItemMixins from "../monitor-point/monitor-item/item.mixins";
  import EchartsEightChange from "../monitor-point/monitor-echarts/base/echarts-8-change";
  import EchartsOneCompose from "../monitor-point/monitor-echarts/base/echarts-1-compose";
  import XLoading from '@/components/animation/x-loading.vue'
  import EchartsTwoChange from '../monitor-point/monitor-echarts/base/echarts-2-displacement'
  export default {
    mixins: [ItemMixins],
    components: {EchartsThreeChange, EchartsEightChange, EchartsOneCompose, XLoading,EchartsTwoChange},
    data() {
      return {
        isLoading: false,
        form: {},
        xNum: 30,
        monitorTypeBtn: [],
        radio1: '',
        chartsName: ['echartsChange3', 'echartsChange8'], // 当前的图表钩子
        currentRow: {},
      }
    },
    computed: {
      //久感监测
      jiuGanKeJi() {
        //jcdw-admin 和 jgkj-admin 是公司账号
        return this.$store.state.userInfo.organizationId === '1435423548344758274' || this.$store.state.userInfo.organizationId === '1432987939817877505'
      },
    },
    methods: {
      async queryList() {
        this.isLoading = true
        let res = await getMonitorTypeRecord(this.form)
        this.currentRow = res.data
        this.$nextTick(() => {
          let num = 0
          let monitorInfo
          let colorList = []
          this.currentRow.map((x, index) => {
              x.monitorList.map((y, index1) => {
                if (this.form.monitorType == 3) {
                  if (y.record.recordList.length !== 0) {
                    monitorInfo = {firstDataTime: y.record.realValue[0][0]}
                    this.$refs.echartsChange3[num].updateEchart(y.record, y.monitorPointName, monitorInfo)
                    if (num <= this.$refs.echartsChange3.length) {
                      num++
                    }
                  }
                } else if (this.form.monitorType == 1) {
                  if (y.record.recordList.length !== 0) {
                    this.$refs.echartsChange1[num].updateEchart(y.record.recordList, 0, colorList);
                    if (num <= this.$refs.echartsChange1.length) {
                      num++
                    }
                  }
                } else if (this.form.monitorType == 2) {
                  if (y.record.recordList.length !== 0) {
                    this.$refs.echartsChange2[num].updateEchart(y.record,y.monitorPointName);
                    if (num <= this.$refs.echartsChange2.length) {
                      num++
                    }
                  }
                }
                else if (this.form.monitorType == 8) {
                  if (y.record.recordList.length !== 0) {
                    monitorInfo = {firstDataTime: y.record.azRealAngle[0][0]}
                    if(this.$refs[`echartsChange8${index}${index1}`]){
                      this.$refs[`echartsChange8${index}${index1}`][0].updateEchart(y.record, y.monitorPointName, this.jiuGanKeJi, monitorInfo)
                    }
                  }
                }
              })
            }
          )
        })
        this.isLoading = false
      },
      toControl(workPointId, monitorPointId) {
        this.$router.push({
          path: `/project/${this.form.projectId}/work-point/${workPointId}/monitor/${this.form.monitorType}?activeId=${monitorPointId}`
        })
      },
    },
    created() {

    },
    mounted() {
    },
    activated() {
      const projectId = this.$route.params?.projectId
      this.form = {
        projectId: projectId,
      }
      // 查询项目信息
      let monitorTypeList = getLocalStorageItem('monitorTypeList')
      let data = []
      let monitorTypeBtn = [{monitorType: 1, name: '深部位移'},{monitorType: 2, name: '地表位移'}, {monitorType: 3, name: '拉线位移'}, {
        monitorType: 8,
        name: '倾角仪'
      }]
      //过滤出有的种类
      monitorTypeBtn.forEach(item => {
        let list = monitorTypeList.filter(_item => _item.name == item.name)[0]
        if (list !== undefined) {
          data.push(list)
        }
      })
      this.monitorTypeBtn = data
      console.log(data)
      if (this.$route.query.monitorType) {
        this.form.monitorType = parseInt(this.$route.query.monitorType)
      } else {
        this.form.monitorType = this.monitorTypeBtn[0].monitorType
      }
      this.queryList()


    }
  }
</script>
<style scoped="scoped" lang="less">
  @import url('../common');

  .monitor-type {
    color: #2196f3 !important;
    display: inline-block;
    margin-left: 0px;
    margin-right: 0px !important;
    padding: 0px !important;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto;
  }

  .warning_button {
    padding: 0px 5px !important;
    font-size: 12px;
    height: 20px !important;
  }

  .TypeName {
    /deep/ .el-button {
      color: black !important;
    }
  }

  .demo-drawer {

    .demo-drawer__content {
      height: 90%;
    }

    .demo-drawer__footer {
      bottom: 5%;
    }
  }

  .page_mainBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2vw;
    flex-wrap: wrap;

    h3 {
      margin-bottom: 1vw;
      font-weight: 600;
      font-size: 1.4vw;
    }

    .el-card {
      margin-bottom: 1vw;
      height: 16vw;
      margin-right: 0.3%;
    }

    /deep/ .el-card__body {
      height: 15vw !important;

    }
  }
</style>
